<template>
	<view class="organization-content" :class="{hidden: show || show2 || show3 || show4 || show5|| show6|| show7}">
		
		<view class="search u-flex-between">
			<view class="left u-flex-center" @click="show=true" style="">
				<view class="mr-10 text-gray">
					{{bmmc}}
				</view>
				<view class="u-flex">
					<u-icon name="arrow-down-fill" color="#fd7400" size="24"></u-icon>
				</view>
			</view>
			<view class="right u-flex-center" @click="show6=true">
				<view class="mr-5 text-gray">
					搜索
				</view>
				<view class="">
					<u-icon name="search" color="#fd7400" size="44"></u-icon>
				</view>
			</view>
		</view>
		<view class="cy-list">
			<view class="" v-if="ygList.length == 0" style="height: 100%;">
				<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="请先添加成员" textSize="36"
					iconSize="60">
				</u-empty>
			</view>
			<view class="cy-item" v-for="(item) in ygList">
				<view class="u-flex-between">
					<view class="left u-flex" @click="editYg(item)">
						<view class="cy-img mr-10">
							<u-avatar :src="src" size="112" shape="square"></u-avatar>
						</view>
						<view class="cy-name">
							<view class="f700 " style="font-size: 32rpx;">
								{{item.name}}
							</view>
							<view class="text-gray" style="font-size: 28rpx;">
								{{item.phone}}
							</view>
						</view>
					</view>
					<view class="right" style="">
						<view class="cy-switch" style="">
							<view class="f700 text-gray">
								移动端权限
							</view>
							<view class="" style="display: flex;justify-content: flex-end;">
								<u-switch @change="change(item)" size="44" activeColor="#fd7400"
									v-model="item.isAdminMobile"></u-switch>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="footer" @click="show5=true">
			<u-button  :customStyle="orangeBtn2">添加成员</u-button>
		</view>
		<u-popup :show="show" @close="show=false" mode="bottom" :round="20" >
			<view class="popup-v">
				<view class="popup-header">
					<view class="close u-flex" @click="close">
						<u-icon name="close"></u-icon>
					</view>
					<view class="title">
						部门选择
					</view>
				</view>
				<view class="popup-c">
					<view class="popup-content">
						<view class="title">
							部门筛选
						</view>
						<view style="padding: 10rpx;">
							<view class="u-grid">
								<view v-for="(item,index) in option" class="tagA" :class="{isActive:currindex===index}">
									<view class="" @click="change1(item,index)">
										{{item.stName}}
									</view>
								</view>
							</view>
						</view>
						<view style="padding: 10rpx;" v-if="range.length > 0">
							<view class="title">
								二级部门
							</view>
							<view style="padding: 10rpx;">
								<view class="u-grid">
									<view v-for="(item,index) in range" class="tagA"
										:class="{isActive:currindex2===index}">
										<view class="" @click="change2(item,index)">
											{{item.stName}}
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="" v-if="range1.length > 0">
							<view class="title">
								三级部门
							</view>
							<view style="padding: 10rpx;">
								<view class="u-grid">
									<view v-for="(item,index) in range1" :class="{isActive:currindex3===index}"
										class="tagA">
										<view class="" @click="change3(item,index)">
											{{item.stName}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="footer u-flex">
						<view class="">
							<u-button :customStyle="cancelBtn" @click="show=false">取 消</u-button>
						</view>
						<view>
							<u-button type="primary" :customStyle="orangeBtn" @click="show=false">
								确 认
							</u-button>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="show2" @close="show2=false" :round="20" mode="bottom">
			<view class="popup-v">
				<view class="popup-header">
					<view class="close u-flex" @click="show2=false" style="">
						<u-icon name="close"></u-icon>
					</view>
					<view class="title">
						编辑成员
					</view>
				</view>
				<view class="popup-c">
					<view class="edit-form">
						<view class="u-flex form-item">
							<view class="">
								成员姓名
							</view>
							<input type="text" v-model="form.name"></input>
						</view>
						<view class="u-flex form-item">
							<view class="">
								成员账号
							</view>
							<input type="text" v-model="form.no"></input>
						</view>
						<view class="u-flex form-item">
							<view class="">
								成员手机
							</view>
							<input type="text" v-model="form.phone"></input>
						</view>

						<view class="u-flex form-item">
							<view class="">
								确认密码
							</view>
							<input type="password" :placeholder="pwdtext"></input>
						</view>
						<view class="u-flex form-item" @click="show3=true">
							<view class="">
								部门
							</view>
							<view class="u-flex">
								<view class="mr-10">
									{{form.bm}}
								</view>
								<view class="u-flex">
									<u-icon name="arrow-right"></u-icon>
								</view>
							</view>
						</view>
						<view class="u-flex form-item" @click="show4=true">
							<view class="">
								角色
							</view>
							<view class="u-flex">
								<view class="mr-10">
									{{form.js}}
								</view>
								<view class="u-flex">
									<u-icon name="arrow-right"></u-icon>
								</view>
							</view>
						</view>
					</view>
					<view class="footer u-flex">
						<view class="">
							<u-button  :customStyle="cancelBtn" @click="deleteEmpById(item)">删除成员</u-button>
						</view>
						<view>
							<u-button type="primary" :customStyle="orangeBtn" @click="updateEmp">
								保 存
							</u-button>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="show3" @close="show3=false" :round="20" mode="bottom" :overlay="true">
			<view style="max-height: 600px;" class="popup-v">
				<view class="popup-header">
					<view class="close u-flex" @click="show3=false">
						<u-icon name="close"></u-icon>
					</view>
					<view class="title">
						选择部门
					</view>
				</view>
				<view class="bm-list" style="padding: 0 30rpx;height: 100%;overflow: auto;">
					<view class="" v-for="(item,index) in data" style="padding: 30rpx;"
						:class="{isActive2:currindex4===index}">
						<view class="" @click="selectBm(item,index)">
							{{item.stName}}
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="show4" @close="show4=false" :round="20" mode="bottom" :overlay="true" >
			<view style="max-height: 600px;" class="popup-v">
				<view class="popup-header">
					<view class="close u-flex" @click="show4=false">
						<u-icon name="close"></u-icon>
					</view>
					<view class="title">
						选择角色
					</view>
				</view>
				<scroll-view :scroll-y="true" style="height: 540px;">
					<view class="bm-list" style="padding: 0 30rpx;">
						<view class="" v-for="(item,index) in roleList" style="padding: 30rpx;"
							:class="{isActive2:currindex5===index}">
							<view class="" @click="selectJs(item,index)">
								{{item.label}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<u-popup :show="show5" @close="show5=false" :round="20" mode="bottom">
			<view class="popup-v">
				<view class="popup-header">
					<view class="close u-flex" @click="show5=false" style="">
						<u-icon name="close"></u-icon>
					</view>
					<view class="title">
						添加成员
					</view>
				</view>
				<view class="popup-c">
					<view class="edit-form">
						<view class="u-flex form-item">
							<view class="">
								登录账号
							</view>
							<view class="u-flex" @click="show7=true">
								<view class="text-gray">
									查询
								</view>
								<view class="u-flex">
									<u-icon name="search" size="44"></u-icon>
								</view>
							</view>
						</view>
						<view class="u-flex form-item">
							<view class="">
								成员手机
							</view>
							<input type="text" placeholder="请输入成员手机号码" v-model="addForm.phone"></input>
						</view>
						<view class="u-flex form-item">
							<view class="">
								成员姓名
							</view>
							<input type="text" placeholder="请输入成员姓名" v-model="addForm.name"></input>
						</view>
						<view class="u-flex form-item" @click="show3=true">
							<view class="">
								部门
							</view>
							<view class="u-flex">
								<view class="mr-10">
									{{addForm.bm}}
								</view>
								<view class="u-flex">
									<u-icon name="arrow-right"></u-icon>
								</view>
							</view>
						</view>
						<view class="u-flex form-item" @click="show4=true">
							<view class="">
								角色
							</view>
							<view class="u-flex">
								<view class="mr-10">
									{{addForm.js}}
								</view>
								<view class="u-flex">
									<u-icon name="arrow-right"></u-icon>
								</view>
							</view>
						</view>
					</view>
					<view class="footer u-flex">
						<view class="">
							<u-button  :customStyle="cancelBtn" @click="show5=false">取消</u-button>
						</view>
						<view>
							<u-button type="primary" :customStyle="orangeBtn" @click="save">
								保 存
							</u-button>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup :show="show3" @close="show3=false" :round="20" mode="bottom" :overlay="true">
			<view style="max-height: 600px;" class="popup-v">
				<view class="popup-header">
					<view class="close u-flex" @click="show3=false">
						<u-icon name="close"></u-icon>
					</view>
					<view class="title">
						选择部门
					</view>
				</view>
				<view class="bm-list" style="padding: 0 30rpx;height: 100%;overflow: auto;">
					<view class="" v-for="(item,index) in data" style="padding: 30rpx;"
						:class="{isActive2:currindex4===index}">
						<view class="" @click="selectBm(item,index)">
							{{item.stName}}
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup :show="show6" @close="show6=false"  :round="20" mode="bottom" >
			<view class="popup-v">
				<view class="popup-header">
					<view class="close u-flex" @click="show6=false" style="">
						<u-icon name="close"></u-icon>
					</view>
					<view class="title">
						成员搜索
					</view>
				</view>
				<view class="popup-c">
					<view class="edit-form">
						<u--input placeholder="请输入内容" border="surround" suffixIcon="search"
							suffixIconStyle="color: #909399;font-size: 22px;" :customStyle="searchCss"
							v-model="keyword"></u--input>
					</view>
					<view class="footer u-flex">
						<view class="">
							<u-button  :customStyle="cancelBtn" @click="show6=false">取 消</u-button>
						</view>
						<view>
							<u-button type="primary" :customStyle="orangeBtn" @click="searchCountList">
								查 询
							</u-button>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="show7" @close="show7=false">
			<view class="popup-v">
				<view class="popup-header">
					<view class="close u-flex" @click="show7=false" style="">
						<u-icon name="close"></u-icon>
					</view>
					<view class="title">
						账号查询
					</view>
				</view>
				<view class="popup-c">
					<view class="edit-form">
						<u--input placeholder="请输入手机号" border="surround" suffixIcon="search"
							suffixIconStyle="color: #909399;font-size: 22px;" :customStyle="searchCss"
							v-model="addForm.no"></u--input>
					</view>
					<view class="footer u-flex">
						<view class="">
							<u-button :customStyle="cancelBtn" @click="show7=false" style="background-color: #fff;">取 消</u-button>
						</view>
						<view>
							<u-button type="primary" :customStyle="orangeBtn" @click="inquireAccount">
								查 询
							</u-button>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orangeBtn: {
					height: '50px !important',
					// boxShadow: '0 7px 40px rgba(235 151 43 / 30%)',
					background: '#fd7400',
					border: '0',
					boxShadow: '0px 7px 40px  rgba(253, 112, 8, 0.2)',
					borderRadius: '8px',
					fontSize: '18px',
					width: '200px'
				},
	orangeBtn2: {
					height: '50px !important',
					// boxShadow: '0 7px 40px rgba(235 151 43 / 30%)',
					background: '#fd7400',
					border: '0',
					boxShadow: '0px 7px 40px  rgba(253, 112, 8, 0.2)',
					borderRadius: '8px',
					fontSize: '18px',
					color:'#fff'
				},
				cancelBtn: {
					height: '50px !important',
					border: '0',
					borderRadius: '8px',
					fontSize: '18px',
					width: '120px',
					color:'red',
					backGround:'#fff'
				},
				bmmc: '',
				delId: '',
				show: false,
				show2: false,
				show3: false,
				show4: false,
				show5: false,
				show6: false,
				show7: false,
				currindex: -1,
				currindex2: -1,
				currindex3: -1,
				currindex4: -1,
				currindex5: -1,
				custAccId: '',
				label: '',
				keyword: '',
				range: [],
				range1: [],
				data: [],
				empStrucAcc: [],
				empRoles: [],
				option: [

				],
				ygList: [],
				bmId: '',
				strucId: '',
				roleList: [],
				ygId: '',
				acId: "",
				form: {
					phone: '',
					name: '',
					no: '',
					pwd: '',
					bm: "",
					js: ''
				},
				src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
				switchValue: '',
				searchCss: {
					height: '54px'
				},
				addForm: {
					phone: '',
					name: "",
					bm: '',
					js: "",
					no: ''
				},
				saveEmp: {
					custAccId: '',
					acId: '',
					accountId: '',
					department: '',
					name: '',
					phone: "",
					role: '',
				},
				pwdtext:'空则不修改'
			};
		},
		onLoad() {
			this.custAccId = uni.getStorageSync('custAccid')
			this.acId = uni.getStorageSync('acId')
			this.findAllStructure()
			this.findAllRole()
			console.log(this.strucId, 'strucId')
		},
		methods: {
			addStaff() {
				uni.navigateTo({
					url: `./addstaff?id=${this.bmId}`
				})
			},
			edit() {
				console.log(this.bmId)
				uni.navigateTo({
					url: `./editorganization?id=${this.bmId}`
				})
			},
			change1(e, index) {
				console.log('一级部门', e)
				this.range = this.data.filter(i => e.id == i.stFather).map(i => {
					return {
						...i,
						text: i.stName,
						value: i.id
					}
				});
				this.range1 = [];
				console.log(this.range)
				this.bmId = e.id
				this.strucId = e.id
				this.findAccountList(e.id)
				this.currindex = index
				this.currindex2 = -1
				this.currindex3 = -1
				this.bmmc = e.text
			},
			change2(e, index) {
				console.log('二级部门', e)
				this.strucId = e.id
				this.bmmc = e.stName
				this.range1 = this.data.filter(i => e.id == i.stFather).map(i => {
					return {
						...i,
						text: i.stName,
						value: i.id
					}
				});
				this.bmId = e.id
				this.findAccountList(e.id)
				this.currindex2 = index
				this.currindex3 = -1
			},
			change3(e, index) {
				console.log('三级部门', e)
				this.bmId = e.id
				this.bmmc = e.stName
				this.currindex3 = index
			},
			async findAllStructure() {
				const res = await uni.$api.organization.findAllStructure({
					custAccId: this.custAccId
				})
				console.log(res)
				this.data = res.data
				this.option = res.data.filter(i => i.stFather == 0).map(i => {
					return {
						...i,
						text: i.stName,
						value: i.id
					}
				})
				let index = 0; //选中指针
				this.bmmc = this.option[index].stName
				this.currindex = index;
				this.currindex4 = index
				this.currindex5 = index
				this.strucId = this.option[index].id
				this.range = this.data.filter(i => this.strucId == i.stFather).map(i => {
					return {
						...i,
						text: i.stName,
						value: i.id
					}
				});
				console.log(this.bmmc, this.strucId, 'this.strucId')
				console.log(this.data, 'this.data', this.option)
				this.findAccountList(this.strucId)
			},
			async findAccountList(strucId) {
				console.log(strucId, 'strucId')
				let data = {
					custAccId: this.custAccId,
					strucId: this.strucId
				}
				const res = await uni.$api.authority.findAccountList({
					...data
				})
				console.log(res, '部门员工')
				this.ygList = res.data
			},
			// 新增部门
			addDepartment() {
				uni.navigateTo({
					url: '/pagesA/pages/organization/adddepartment'
				})
			},
			// 删除
			async deleteEmpById() {
				const res = await uni.$api.authority.deleteEmpById({
					id: this.ygId,
					custAccId: this.custAccId
				})
				console.log(res)
				if (res.code === 0) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					this.show2 = false
					this.findAccountList()
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}

			},
			// 编辑员工
			editEmp(id) {
				uni.navigateTo({
					url: `/pagesA/pages/organization/editemp?id=${id}&bmId=${this.bmId}`
				})
			},
			close() {
				this.show = false
			},
			// 查询角色权限
			async findAllRole() {
				const res = await uni.$api.authority.findAllRole({
					custAccId: this.custAccId
				})
				console.log(res)
				let list = res.data || [];
				list = list.map((v, i) => {
					return {
						label: v.roName,
						value: v.id,
					}
				})
				list.push({
					label: '系统超级管理员',
					value: 0,
				})
				this.roleList = list;
				console.log(this.roleList)

			},
			// 选择部门
			selectBm(e, index) {
				console.log(e)
				this.currindex4 = index
				this.show3 = false
				this.form.bm = e.stName
				this.addForm.bm = e.stName
				this.saveEmp.department = e.id
				this.empStrucAcc = [e]
				this.empStrucAcc.map((v, i) => {
					this.empStrucAcc[i] = {
						empId: this.ygId,
						struId: v.id,
						custAccId: this.custAccId
					}
				})
				console.log(this.empStrucAcc, 'this.empStrucAcc')
			},
			// 选择角色
			selectJs(e, index) {
				console.log(e)
				this.currindex5 = index
				this.form.js = e.label
				this.addForm.js = e.label
				this.saveEmp.role = e.value
				this.show4 = false
				this.empRoles = [e]
				this.empRoles.map((v, i) => {
					this.empRoles[i] = {
						acId: this.acId,
						roId: v.value,
						custAccId: this.custAccId
					}
				})
			},
			// 编辑员工
			editYg(e) {
				console.log(e)
				this.ygId = e.id
				this.findEmpInfoById()
				this.show2 = true
			},
			// 移动端权限
			change(e) {
				console.log(e)
				this.authorizationMobile(e)
			},
			// 移动端权限接口
			async authorizationMobile(e) {
				let data = {
					custAccId: this.custAccId,
					id: e.id,
					isAdminMobile: e.isAdminMobile
				}
				const res = await uni.$api.organization.authorizationMobile(data)
				console.log(res)
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			},
			// 查询员工详细
			async findEmpInfoById() {
				const res = await uni.$api.authority.findEmpInfoById({
					id: this.ygId,
					custAccId: this.custAccId,
					acId: this.acId
				})
				this.form.name = res.data.zjEmp.empName
				this.form.phone = res.data.zjEmp.einfoPhone
				this.form.no = res.data.zjEmpAccount.acNo
				this.form.pwd = res.data.zjEmpAccount.acPwd
				this.form.bm = res.data.structures[0].stName
				this.form.js = res.data.zjEmpRoles[0].roName
				this.strucId = res.data.structures[0].id
				if(this.data.length > 0){
					this.currindex4 = this.data.findIndex(i => i.stName == this.form.bm);
					console.log('this.currindex4-1', this.currindex5, this.data, this.form.bm)
				}
				if(this.roleList.length > 0){
					this.currindex5 = this.roleList.findIndex(i => i.label == this.form.js);
					console.log('this.currindex5-1', this.currindex5, this.roleList, this.form.js)
				}
			},
			// 保存编辑员工
			async updateEmp() {
				// this.form.department=this.value
				// this.form.custAccId=this.custAccId
				let data = {
					emp: {
						id: this.ygId,
						empName: this.form.name,
						einfoPhone: this.form.phone,
						custAccId: this.custAccId
					},
					empAccount: {
						id: this.acId,
						acNo: this.form.no
					},
					empStrucAcc: this.empStrucAcc,
					empRoles: this.empRoles
				}
				console.log(data)
				const res = await uni.$api.authority.updateEmp(this.acId, data)
				console.log(res.msg)
				setTimeout(() => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				})
			},
			// 新增员工查询	
			async inquireAccount() {

				if (this.addForm.no === '') {
					return uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				} else {
					let data = {
						account: this.addForm.no,
						custAccId: this.custAccId
					}
					const res = await uni.$api.authority.inquireAccount(data)
					if (res.code == 0) {
						this.addForm.name = res.data.empName
						this.addForm.phone = res.data.einfoPhone
						this.saveEmp.accountId = res.data.acId
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						this.show7 = false

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}
			},
			// 删除角色接口

			// deleteEmpById(){

			// },
			save() {
				this.saveEmp.phone = this.addForm.phone
				this.saveEmp.name = this.addForm.name
				this.saveEmp.acId = this.acId
				this.saveEmp.custAccId = this.custAccId
				this.pullEmp()
				this.findAccountList(this.strucId)
			},
			// 新增员工保存接口
			async pullEmp() {
				let data = this.saveEmp
				const res = await uni.$api.authority.pullEmp(data)
				console.log(res)
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.show5 = false
			},
			// 搜索
			async searchCountList() {
				let data = {
					custAccId: this.custAccId,
					strucId: this.strucId,
					name: this.keyword
				}
				const res = await uni.$api.authority.findAccountList({
					...data
				})
				if (res.code === 0) {
					uni.showToast({
						title: '查询成功',
						icon: 'none'
					})
					this.ygList = res.data
					console.log(res, '部门员工')
					this.show6 = false
				}


			}
		}
	}
</script>

<style lang="scss">
	/deep/.u-transition {
		z-index: 10065 !important;
	}

	/deep/uni-toast {
		z-index: 99999 !important;
		/* 根据实际情况进行调整 */
	}

	.isActive {
		color: #fff;
		background-color: #fd7400 !important;
		border: 0;
		border-radius: 8rpx;
	}

	.isActive2 {
		color: #fd7400;

	}

	.popup-v {
		// background: #fff;
		// height: calc(100vh - env(safe-area-inset-bottom));
		height: calc(95vh - env(safe-area-inset-bottom));

		.popup-header {
			padding: 30rpx 60rpx;
			display: flex;
			justify-content: center;

			.close {
				width:
					40rpx;
			}

			.title {
				font-size: 36rpx;
				font-weight: 700;
				width: 100%;
				text-align: center;
			}
		}

		.edit-form {
			padding: 0 60rpx;

			.form-item {
				background-color: #fff;
				justify-content: space-between;
				padding: 30rpx;
				margin-bottom: 30rpx;
				text-align: right;
				border: 1px solid #f5f5f5;
				border-radius: 8rpx;
			}
		}

		.popup-c {
			max-height: 100%;
			overflow: auto;

			.popup-content {
				padding: 0 60rpx 60rpx 60rpx;

				.title {
					margin-bottom: 30rpx;
					border-left: 6rpx solid #fd7400;
					padding: 0 10rpx;

				}

				.tagA {
					text-align: center;
					padding: 20rpx 0;
					margin-bottom: 30rpx;
					border-radius: 8rpx;
					background-color: #f5f5f5;
				}
			}

			.footer {
				padding: 60rpx;
				width: 100%;
				justify-content: space-between;
				position: fixed;
				bottom: 0;
				background-color: #fff;
				margin-top: 60rpx
			}
		}
	}

	page {
		height: 100%;
	}

	.organization-content {
		height: 100%;
		padding: 30rpx;
		background: #fff3e885;
		overflow: auto;

		&.hidden {
			overflow: hidden;
		}

		.add-card {
			padding: 20rpx;
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.left {
				width: 50%;
				border-radius: 8rpx;
				padding: 30rpx;
				background-color: #4ad57496;
			}

			.right {
				width: 50%;
				background-color: #fff3e8;
				padding: 30rpx;
				border-radius: 8rpx;
			}
		}

		.search {
			background-color: #fff;
			padding: 40rpx;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
		}

		.cy-list {
			min-height: calc( 100% - 130px);
			.cy-item {
				padding: 40rpx;
				background-color: #fff;
				margin-bottom: 20rpx;
				border-radius: 10px;

				.left {
					height: 120rpx;

					.cy-img {
						border-radius: 8rpx
					}

					.cy-name {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
					}
				}

				.right {
					.cy-switch {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						height: 120rpx;
					}
				}
			}

		}
	}
</style>